<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="/static/admin/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/static/admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/static/admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/static/admin/css/style.css" />

    <script type="text/javascript" src="/static/admin/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/admin/lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="/static/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/static/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/static/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript" src="/static/admin/js/H-ui.js"></script>
    <script type="text/javascript" src="/static/admin/js/H-ui.admin.page.js"></script>
    <script type="text/javascript" src="/static/admin/js/admin.js"></script>
</head>

<body>
    <div class="Hui-article">
        <article class="cl pd-20">
            <form action="{:url('topic_sun/save',['tid'=>$tid,'id'=>$data.id])}" method="post"
                class="form form-horizontal" id="form-admin-article">
                <input type="hidden" name="id" id="id" value="{$data.id}">
                <input type="hidden" name="tid" id="tid" value="{$tid}">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>标题:</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <input type="text" class="input-text" value="{$data.title}" placeholder="请填写标题" id="title"
                            name="title">
                    </div>
                    <div class="col-3"> </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        标题图：</label>
                    <div class="formControls col-xs-6 col-sm-4">
                        <input type="text" class="input-text" value="{$data.title_pic}" name="title_pic" id="title_pic">
                        <div style="width: 160px;height: 160px;">
                            <a href="javascript:void(0);" onclick="uploadPicture()">
                                <img id="view-img"
                                    src="{$data.title_pic ? $data.title_pic : '/static/admin/images/upload_picture.png'}"
                                    alt="标题图" title="{$data.title_pic ? '更换' : '添加'}标题图"
                                    style="max-width: 160px;max-height: 160px;">
                            </a>
                        </div>
                    </div>
                    <label class="form-label col-xs-2 col-sm-2">
                        <a class="btn btn-success radius" href="javascript:void(0);"
                            onclick="uploadPicture()">{$data.title_pic ? '更换' :
                            '添加'}标题图</a></label>
                    <div class="col-3"> </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        关键词:</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <input type="text" class="input-text" value="{$data.keywords}" placeholder="关键词" id="source"
                            name="keywords">
                    </div>
                    <div class="col-3"> </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">内容简介:</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <textarea name="summary" id="summary" cols="" rows="" class="textarea"
                            placeholder="说点什么...最多输入500个字符" datatype="*10-100" dragonfly="true"
                            onKeyUp="textarealength(this,500)">{$data.summary}</textarea>
                        <p class="textarea-numberbar">
                            <em class="textarea-length">0</em>/500
                        </p>
                    </div>
                    <div class="col-3"> </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        点击量：</label>
                    <div class="formControls col-xs-4 col-sm-2">
                        <input type="number" class="input-text" value="{$data.clicks}" id="clicks" name="clicks"
                            style="width: 200px;">
                    </div>
                    <label class="form-label col-xs-4 col-sm-2">
                        排序：</label>
                    <div class="formControls col-xs-4 col-sm-2">
                        <input type="number" class="input-text" value="{$data.sort}" id="sort" name="sort" max="9999"
                            style="width: 200px;">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>专题类型:</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <div class="radio-box">
                            <input type="radio" id="radio-1" name="type" value="1" {if $data.type==1}checked{/if}>
                            <label for="radio-1">绑定地址</label>
                        </div>
                        <!-- <div class="radio-box">
                        <input type="radio" id="radio-2" name="type" value="2" {if $data.type==2}checked{/if}>
                        <label for="radio-2">封面式</label>
                    </div> -->
                        <div class="radio-box">
                            <input type="radio" id="radio-3" name="type" value="2" {if $data.type==2}checked{/if}>
                            <label for="radio-3">列表式</label>
                        </div>
                        <div class="radio-box">
                            <input type="radio" id="radio-4" name="type" value="3" {if $data.type==3}checked{/if}>
                            <label for="radio-4">内容式</label>
                        </div>
                    </div>
                    <div class="formControls col-xs-8 col-sm-8">
                        <p class="c-primary">绑定地址要再专题路径里填入绑定的url; 列表式要选择列表模板; 内容式要录入页面内容</p>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        <span class="c-red">*</span>url:</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <input type="text" class="input-text" value="{$data.topic_url}" placeholder="请填写url"
                            id="topic_url" name="topic_url">
                    </div>
                    <div class="col-3"> </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">列表模板</label>
                    <div class="formControls col-xs-8 col-sm-4">
                        <span class="select-box" style="width:150px;">
                            <select class="select" id="template_list_id" name="template_list_id">
                                <option value="0" {eq name='data.template_list_id' value="0" }selected{/eq}>通用文章列表模板
                                </option>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">
                        页面内容:</label>
                    <div class="col-3"> </div>
                </div>
                <div class="row cl">
                    <div class="formControls col-xs-10 col-sm-10 col-xs-offset-2 col-sm-offset-1">
                        <textarea name="topic_content" id="topic_content" cols="" rows="" class="textarea"
                            style="height: 400px;" placeholder="" dragonfly="true">{$data.topic_content}</textarea>
                    </div>
                    <div class="col-3"> </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                        <button type="button" class="btn btn-success radius" id="admin-powers-save"
                            name="">确&nbsp;定</button>
                        <button type="button" class="btn btn-default radius" onclick="layer_close()"
                            style="margin-left:20px;">取&nbsp;消</button>
                    </div>
                </div>
            </form>
            <!-- 标题图上传 -->
            <div>
                <input type="file" hidden name="image" id="upload_picture">
            </div>
        </article>
    </div>

    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript">
        // 标题图上传
        const file = document.querySelector('#upload_picture');

        function uploadPicture() {
            // file模拟input点击事件
            var evt = new MouseEvent("click", {
                bubbles: false,
                cancelable: true,
                view: window,
            });
            file.dispatchEvent(evt, uploadfn());
        }

        function uploadfn() {
            file.oninput = function () {
                if (file.files && file.files[0]) {
                    var formData = new FormData();
                    formData.append("upload_file", file.files[0]);
                    $.ajax({
                        url: '{:url("file_manager/uploadImage")}',
                        type: "post",
                        data: formData,
                        processData: false, // 告诉jQuery不要去处理发送的数据
                        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                        dataType: 'json',
                        success: function (res) {
                            var img = res.filename;
                            $("#view-img").attr('src', img);
                            $("#title_pic").val(img);
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            });
                            return false;
                        },
                        error: function (res) {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 1000
                            });
                            return false;
                        }
                    });
                }
            }
        }
        // 标题图上传end

        //检测目录
        function checkUrl() {
            var topic_url = $("#topic_url").val();
            $.post('/admin/topic_content/checkurl', {
                'topic_url': topic_url
            }, function (data) {
                console.log(data);
                if (data.code == 1) {
                    layer.msg(data.msg, {
                        icon: 1,
                        time: 1000
                    });
                } else {
                    layer.msg(data.msg, {
                        icon: 5,
                        time: 2000
                    });
                    return false;
                }
            }, 'json');
        }

        $("#admin-powers-save").click(function () {
            if (isNull($("#title").val())) {
                layer.msg('标题不可为空', {
                    icon: 5,
                    time: 1000
                });
                return false;
            }
            var formData = $("#form-admin-article").serializeArray();

            $.ajax({
                url: '{:url("topic_sun/save")}',
                type: "post",
                data: formData,
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 1000
                    }, function(){
                        parent.location.reload(); // 父页面刷新
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    });
                },
                error: function (res) {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 1000
                    });
                    return false;
                }
            });
        });

    </script>

</body>

</html>